<template>
  <div>

    <div class="roleTest">
      ↓管理员用户↓
    </div>

    <panel-group/>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="dashboard-text">
            校友分布地区分布
          </div>
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="dashboard-text">
            校友入职企业分布
          </div>
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="dashboard-text">
            校友薪资分布
          </div>
          <bar-chart />
        </div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
  import PanelGroup from '@/views/dashboard/components/PanelGroup'
  import RaddarChart from '@/views/dashboard/components/RaddarChart'
  import PieChart from '@/views/dashboard/components/PieChart'
  import BarChart from '@/views/dashboard/components/BarChart'

  export default {
    name: 'DashboardAdmin',
    components:{
      PanelGroup,
      RaddarChart,
      PieChart,
      BarChart,
    },
  }
</script>

<style lang="scss" scoped>
  .roleTest{
    background: #ffffff;
    padding: 16px 16px 0;
    height: 50px;
    position: relative;
    color: rebeccapurple;
  }
  .chart-wrapper {
    background: #ffffff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
</style>
